<template>
  <div class="product-directory">
    <div class="product-list">
      <a class="product-item" :style="{ background: backColor }" v-for="(item, index) in productList"
        @click="handleClick(item)" :key="index">
        <div>
          {{ item.categoryName }}
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    productList: {
      type: Array,
      required: true
    },
    backColor: {
      type: String,
      default: "#fff"
    }
  },
  methods: {
    handleClick (item) {
      this.$emit('onClick', item);
    }
  }
}
</script>

<style scoped>
.product-directory {
  padding: 5px 0px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  /* background: #fff; */
  min-width: 700px;
}

.product-item {
  width: calc(25% - 10px);
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  color: #595959;
  transform: all 5s;
  font-size: 16px;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.product-item:hover {
  background: #806e22 !important;
  color: #fff;
  cursor: pointer;
}
</style>